import React, {Fragment} from 'react'
import {TouchableOpacity, Image, View} from 'react-native'
import {createAppContainer, createSwitchNavigator, NavigationEvents} from 'react-navigation'
import {createStackNavigator} from 'react-navigation-stack'
import {goBack, navigate} from 'services/navigation'
import {translateSize, themeColors, definedColors} from 'styles'
import assets from './assets'
import env from 'constants/env.json'

import AuthLoadingScreen from './AuthLoadingScreen'
import WelcomeScreen from './WelcomeScreen'
import SignInScreen from './SignInScreen'
import AppHomeScreen from './AppHomeScreen'
import ChangeCardScreen from './ChangeCardScreen'
import ChangeProjectScreen from './ChangeProjectScreen'
import SettingScreen from './SettingScreen'
import PaySuccessScreen from './PaySuccessScreen'

import cancel from './cancel'
import trade from './trade'
import identity from './identity'
import fund from './fund'
import demo from './demo'
import ChangeTemplateScreen from './ChangeTemplateScreen'
import ShowBillScreen from './ShowBillScreen'
import ChangeFeeScreen from './ChangeFeeScreen'
import {operate} from 'services/authorization'
import SystemSettingScreen from './SystemSettingScreen'
import ConfirmFundScreen from './fund/ConfirmFundScreen'

let appScreen = {
  Welcome: WelcomeScreen,
  AppHome: AppHomeScreen,
  SignIn: SignInScreen,
  ChangeCard: ChangeCardScreen,
  ChangeProject: ChangeProjectScreen,
  Setting: SettingScreen,
  SystemSetting: SystemSettingScreen,
  PaySuccess: PaySuccessScreen,
  ChangeTemplate: ChangeTemplateScreen,
  ShowBill: ShowBillScreen,
  ChangeFee: ChangeFeeScreen,
  ...cancel,
  ...trade,
  ...identity,
  ...fund,
  ...(env.env == 'dev' || env.env == 'ctest' || env.env == 'local' ? demo : {}),
}

const AppStack = createStackNavigator(appScreen, {
  headerMode: 'screen',
  defaultNavigationOptions: {
    headerStyle: {
      margin: translateSize(0),
      elevation: 0,
      borderBottomWidth: 1,
      borderBottomColor: themeColors.divider,
      backgroundColor: themeColors.primary,
    },
    headerTitleStyle: {
      flex: 1,
      fontSize: translateSize(32),
      color: definedColors.white,
      textAlign: 'center',
      justifyContent: 'center',
    },
    headerBackTitle: null,
    headerRight: <View />,
    headerLeft: (
      <Fragment>
        <TouchableOpacity
          activeOpacity={0.8}
          style={{paddingHorizontal: translateSize(24)}}
          onPress={() => {
            goBack()
            operate()
          }}>
          <Image source={assets.images.icon_arrow_left} style={{width: translateSize(40)}} />
        </TouchableOpacity>
        <TouchableOpacity
          activeOpacity={0.8}
          style={{paddingHorizontal: translateSize(24)}}
          onPress={() => {
            navigate('AppHome')
            operate()
          }}>
          <Image source={assets.images.icon_home} style={{width: translateSize(34)}} />
        </TouchableOpacity>
      </Fragment>
    ),
  },
})

export const AppContainer = createAppContainer(
  createSwitchNavigator(
    {
      AuthLoading: ConfirmFundScreen,
      // AuthLoading: AppHomeScreen,
      APPs: AppStack,
    },
    {
      initialRouteName: 'AuthLoading',
    },
  ),
)
